<!--
 * @Author: gyc
 * @Date: 2020-05-21 10:10:40
 * @LastEditTime: 2020-08-21 08:53:17
 * @Description: Nuxt测试版
--> 
<template>
  <div class="article-manage">
    <div class="controls">
      <div>
        关键字
        <input type="text" placeholder="请输入关键字!" style="width:120px;margin-right:10px" />
      </div>
      <div>
        <span>刷新</span>
        <span>上一页</span>
        <input type="number" value="1" />
        <span>下一页</span>
      </div>
    </div>
    <div class="table">
      <table border="0" cellpadding="0" cellspacing="0">
        <thead>
          <tr>
            <th>文章ID</th>
            <th>标题</th>
            <th>状态</th>
            <th>创建时间</th>
            <th>更新时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="v,i in articleList" :key="i">
            <td>{{v.id}}</td>
            <td>{{v.title}}</td>
            <td>{{v.articleStatus}}</td>
            <td>{{v.createTm}}</td>
            <td>{{v.updateTm}}</td>
            <td>
              <nuxt-link :to="'/writeArt/'+v.id">编辑</nuxt-link>
              <a @click="deleteMyArticle(v.id)">删除</a>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <Modal v-model="modal1" title="确认删除" @on-ok="ok()" @on-cancel="cancel">
      <p>是否确定删除?</p>
    </Modal>
  </div>
</template>

<script>
export default {
  name: "articleManage",
  layout: "userPage",
  data() {
    return {
      articleList: [],
      modal1: false,
      selId: 0,
    };
  },
  beforeMount() {
    this.getMyArticle();
  },
  methods: {
    //查询
    getMyArticle() {
      this.$axios
        .get("/api/art/findMyArticle", {
          params: {
            userid: this.$dec(localStorage.getItem("loginCode")),
            page: 1,
          },
        })
        .then((res) => {
          this.articleList = res.data.data;
          console.log(res.data.data);
        });
    },
    //删除deID
    deleteMyArticle(e) {
      this.selId = e;
      this.modal1 = true;
    },
    //确认删除
    ok() {
      this.$axios
        .get("/api/art/deleteMyArticle", {
          params: {
            userid: this.$dec(localStorage.getItem("loginCode")),
            id: this.selId,
          },
        })
        .then((res) => {
          this.getMyArticle();
        });
    },
  },
  components: {},
};
</script>
<style lang="scss" scoped>
input {
  width: 40px;
  outline: none;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-bottom: 1px solid #aaa;
  text-align: center;
  margin-left: 5px;
  margin-right: 5px;
  &::-webkit-outer-spin-button,
  &::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }
  &:focus {
    border-bottom: 1px solid black;
  }
  &:focus label {
    font-size: 24px;
  }
}
.article-manage {
  width: 100%;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: white;
  .controls {
    display: flex;
    color: black;
    justify-content: space-between;
    span {
      cursor: pointer;
      &:hover {
        color: $gcolor;
      }
    }
  }
  .table {
    width: 100%;
    height: 100%;
    margin-top: 20px;
    // border: 1px solid black;
    table {
      width: 100%;
      tr {
        &:hover {
          background-color: rgb(248, 248, 248);
        }
        th {
          background-color: rgb(243, 243, 243);
          color: black;
          text-align: center;
          height: 32px;
        }
        td {
          text-align: center;
          height: 32px;
        }
      }
    }
  }
}
</style>